/**
 * Created by henian.xu on 2017/7/14 0014.
 * Tabs 标签页
 */

$className: $pf + tabs;
$barHeight: 40px;

.#{$className} {
    position: relative;
    &-bar {
        position: relative;
        border-bottom: 1px solid $color-border;
        margin-bottom: $margin;
        &-container {
            line-height: $barHeight;
            &-scrolling {
                padding: 0 24px;

                >.#{$className}-bar{
                    &-next,
                    &-prev {
                        display: block;
                    }
                }
            }
        }
        &-wrap {
            overflow: hidden;
            margin-bottom: -3px;
        }
        &-scroll {
            position: relative;
            display: table;
            word-spacing: -1em; // ie8
            white-space: nowrap;
        }

        &-next,
        &-prev {
            @include make-icon;
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -12px;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
        }
        &-next {
            right: 0;
            &:before {
                content: '\f105';
            }
        }
        &-prev {
            left: 0;
            &:before {
                content: '\f104';
            }
        }
    }
    &-tab {
        display: inline-block;
        padding: 0 $padding/2;
        margin-left: $margin/2;
        cursor: pointer;
        //background-color: #f00;
        //border-right: 1px solid #000;

        &:first-child {
            margin-left: 0;
        }

        &.active {
            color: $color-main;
            border-bottom: 3px solid $color-main;
        }
    }

    &-content {
        display: block;
    }
    &-tabpanel {
        display: block;
    }
}
